<!--
 * @Description: element组件库的用法
 * @Author: Aroma
 * @Date: 2024-11-14 11:00:57
 * @LastEditors: Aroma
 * @LastEditTime: 2024-11-15 09:51:00
 * @别瞎看: 你个无脑牛马
-->
<script setup>
import { Delete, Edit, Search, Share, Upload, ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { Eleme } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'

const tableData = ref([
  { num: '001', name: '张三', score: '90', comment: '很优秀' },
  { num: '002', name: '李四', score: '92', comment: '优秀' },
  { num: '003', name: '王五', score: '83', comment: '很努力，不错' },
  { num: '004', name: '赵六', score: '98', comment: '666' },
])

const form = reactive({
  num: '',
  name: '',
  score: '',
  comment: '',
})

const dialogFormVisible = ref(false)
const selectedRow = ref(null)

const handleClick = (row) => {
  const index = tableData.value.findIndex(item => item.num === row.num)
  if (index !== -1) {
    tableData.value.splice(index, 1)
    
  }
}

const handleEdit = (row) => {
  Object.assign(form, { ...row })
  selectedRow.value = row
  dialogFormVisible.value = true
}

const handleConfirm = () => {
  if (selectedRow.value) {
    const index = tableData.value.findIndex(item => item.num === selectedRow.value.num)
    if (index !== -1) {
      tableData.value[index] = { ...form }
    }
  }
  dialogFormVisible.value = false
}
</script>

<template>
  <el-button type="primary">Primary</el-button>
  <el-button type="success" plain>Success</el-button>
  <el-button type="info" round>Info</el-button>
  <el-button type="warning" round>Warning</el-button>
  <el-button type="danger" :icon="Delete" circle />
  <el-button type="warning" plain disabled>Warning</el-button>
  <el-button type="primary" :icon="Edit" />

  <el-button-group class="ml-4">
    <el-button type="primary" :icon="Edit" />
    <el-button type="primary" :icon="Share" />
    <el-button type="primary" :icon="Delete" />
  </el-button-group>

  <el-button-group>
    <el-button type="primary" :icon="ArrowLeft">Previous Page</el-button>
    <el-button type="primary">
      Next Page<el-icon class="el-icon--right"><ArrowRight /></el-icon>
    </el-button>
  </el-button-group>

  <el-button type="primary" loading>Loading</el-button>
  <el-button type="primary" :loading-icon="Eleme" loading>Loading</el-button>

  <div>
    <el-checkbox v-model="checked1" label="Option 1" size="large" />
    <el-checkbox v-model="checked2" label="Option 2" size="large" />
  </div>
  <div class="my-2">
    <el-checkbox v-model="checked3" label="Option 1" />
    <el-checkbox v-model="checked4" label="Option 2" />
  </div>
  <div class="mt-2">
    <el-checkbox v-model="checked5" label="Option 1" size="small" />
    <el-checkbox v-model="checked6" label="Option 2" size="small" />
  </div>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="num" label="学号" width="150" />
    <el-table-column prop="name" label="姓名" width="120" />
    <el-table-column prop="score" label="分数" width="120" />
    <el-table-column prop="comment" label="评语" width="120" />
    <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.row)">Delete</el-button>
        <el-button link type="primary" size="small" @click="handleEdit(scope.row)">Edit</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogFormVisible" title="文档编辑" width="500">
    <el-form :model="form">
      <el-form-item label="num" :label-width="formLabelWidth">
        <el-input v-model="form.num" autocomplete="off" />
      </el-form-item>
      <el-form-item label="name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="score" :label-width="formLabelWidth">
        <el-input v-model="form.score" autocomplete="off" />
      </el-form-item>
      <el-form-item label="comment" :label-width="formLabelWidth">
        <el-input v-model="form.comment" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog_footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleConfirm">Confirm</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
</style>